<template>
	<view>
		
		<text style="font-size: 16px; font-weight: bold; color: #F19F41;">筛选</text>
		
		<u-form label-position="top" id="form" :border-bottom="false" style="margin-top: 40rpx;">

			<u-form-item label="类型" :border-bottom="false" style="padding: 0;">
				<u-input :value="tem && tem.label" :border="showBorder" @click="showTemPicker = true" inputAlign="left" type="select" :selectOpen="showTemPicker"></u-input>
			</u-form-item>

			<u-form-item label="经销商等级" :border-bottom="false" style="padding: 0;">
				<u-input  :value="type && type.label" :border="showBorder" @click="showTypePicker = true" inputAlign="left" type="select" :selectOpen="showTypePicker"></u-input>
			</u-form-item>
			
			<u-form-item label="经销商名称" :border-bottom="false" style="padding: 0;">
				<u-input class="u-border-bottom" v-model="DealerName" placeholder="经销商名称" ></u-input>
			</u-form-item>
			
			<view class="btn-wrapper u-flex u-text-right u-m-t-40">
				<u-button type="warning" plain size="medium" @tap="resetSearch">重置</u-button>
				<u-button type="warning" size="medium" class="u-m-l-30" @tap="onSearch">查询</u-button>
			</view>
		</u-form>

		<u-select
			@confirm="onPickerChange($event, 'state', 'StateList')"
			:default-value="[stateIndex]"
			v-model="showStatePicker"
			:list="StateList"
			label-name="Value"
			value-name="Key"
		></u-select>
		
		<u-select
			@confirm="onPickerChange($event, 'tem', 'TemList')"
			:default-value="[temIndex]"
			v-model="showTemPicker"
			:list="TemList"
			label-name="Value"
			value-name="Key"
		></u-select>
		
		<u-select
			@confirm="onPickerChange($event, 'type', 'TypeList')"
			:default-value="[typeIndex]"
			v-model="showTypePicker"
			:list="TypeList"
			label-name="Value"
			value-name="Key"
		></u-select>
	</view>
</template>

<script>
export default {
	name: 'review-search-form',
	data() {
		return {
			showBorder: true,

			StateList: [],
			TemList: [],
			TypeList: [],

			showStatePicker: false,
			state: null,
			stateIndex: -1,

			showTemPicker: false,
			tem: null,
			temIndex: -1,

			showTypePicker: false,
			type: null,
			typeIndex: -1,
			
			DealerName: ''
		};
	},
	
	props: {
		value: {
			type: Object,
			default() {
				return {
					TemId: null,
					TypeName: '',
					StateName: '',
					DealerName: '',
				};
			}
		}
	},

	created() {
		console.log(this.value)
		this.getAuditFilter();
	},

	methods: {
		getAuditFilter() {
			this.$u.api.getAuditFilter().then(res => {
				const { StateList, TypeList, TemList } = res;
				this.StateList = StateList;
				this.TypeList = TypeList;
				this.TemList = TemList;
				
				this.updateIndex()
			});
		},

		onPickerChange(e, key, listKey) {
			if (!e[0].value || !e[0].label) {
				if (this[listKey].length > 0) {
					this[key] = {
						label: this[listKey][0].Value,
						value: this[listKey][0].Key
					};
				} else {
					return false;
				}
			} else {
				this[key] = e[0];
			}
			this[`${key}Index`] = this[listKey].findIndex(item => item.Key == this[key].value);
		},

		onSearch() {
			this.$emit('input', {
				TemId: this.tem && this.tem.value,
				TypeName: this.type && this.type.label,
				StateName: this.state && this.state.label,
				DealerName: this.DealerName
			});

			this.$emit('change', {
				TemId: this.tem && this.tem.value,
				TypeName: this.type && this.type.label,
				StateName: this.state && this.state.label,
				DealerName: this.DealerName
			});
		},

		resetSearch() {
			this.$emit('input', {
				TemId: null,
				TypeName: '',
				StateName: '',
				DealerName: '',
			});

			this.$emit('change', {
				TemId: null,
				TypeName: '',
				StateName: '',
				DealerName: '',
			});
		},

		updateIndex() {
			
			this.DealerName = this.value.DealerName
			
			this.stateIndex = this.StateList.findIndex(item => item.Value == this.value.StateName);
			const selectedState = this.StateList.find(item => item.Value == this.value.StateName);
			if (selectedState) {
				this.state = {
					value: selectedState.Key,
					label: selectedState.Value
				};
			}
			
			this.typeIndex = this.TypeList.findIndex(item => item.Key == this.value.TypeName);
			const selectedType = this.TypeList.find(item => item.Key == this.value.TypeName);
			if (selectedType) {
				this.type = {
					value: selectedType.Key,
					label: selectedType.Value
				};
			}
			
			this.temIndex = this.TemList.findIndex(item => item.Key == this.value.TemId);
			const selectedTem = this.TemList.find(item => item.Key == this.value.TemId);
			if (selectedTem) {
				this.tem = {
					value: selectedTem.Key,
					label: selectedTem.Value
				};
			}
			
		}
	}
};
</script>

<style lang="scss"></style>
